<template>
  <el-row :gutter="16">
    <el-col :span="10">
      <div class="grid-content bg-purple">
        <el-container>
          <el-calendar v-model="value">
            <template slot="dateCell" slot-scope="{ date, data }">
              <div class="date-content">
                <span class="text">{{ getDay(date) }}</span>
                <span v-if="isWeek(date)" class="rest">休</span>
              </div>
            </template>
          </el-calendar>
        </el-container>
      </div>
    </el-col>

    <el-col :span="10">
      <div class="grid-content bg-purple">
        <template>
          <h3>待办事项</h3>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="date" label="申请时间" width="180">
            </el-table-column>
            <el-table-column prop="type" label="申请类型">
            </el-table-column>
          </el-table>
        </template>
      </div>
    </el-col>

    <el-col :span="3">
      <div class="grid-content bg-purple">
        <h5>本月迟到次数最多</h5>
        <span v-for="x in list1">
          <span>{{x}}</span><br>
        </span>

        <br><br><br><br><br><br>
        <h5>本月请假次数最多</h5>
        <span v-for="x in list2">
        <span>{{x}}</span><br>
        </span>
        <br><br><br><br><br><br>

        <h5>本月早退次数最多</h5>
        <span v-for="x in list3">
          <span>{{x}}</span><br>
        </span>
      </div>
    </el-col>

  </el-row>
</template>

<script>
  export default {
    // name: "shouye",
    data() {
      return {
        value: new Date(),
        list1: [],
        list2: [],
        list3: [],
        tableData:{
          name:"",
          date:"",
          type:""
        }
        // month: moment().format('YYYY-MM'),
        // calendarData: []
      }
    },
    mounted() {
      // this.loadData();
      // this.open2();
      // this.$notify({
      //   title: '提示',
      //   message: '这是一条不会自动关闭的消息',
      //   duration: 0
      // });
      // this.getData();
    },
    methods: {
      //加载数据
      loadData() {
        var self = this;
        this.$http.get("/schedule/selectLateMax", {
            params: this.question
          })
          .then(function(rs) {
            if (rs.data.success) {
              self.list1 = rs.data.data.list1;
            }
          })
        this.$http.get("/schedule/selectLeaveMax", {
            params: this.question
          })
          .then(function(rs) {
            if (rs.data.success) {
              self.list2 = rs.data.data.list2;
            }
          })
        this.$http.get("/schedule/selectEarlyMax", {
            params: this.question
          })
          .then(function(rs) {
            if (rs.data.success) {
              self.list3 = rs.data.data.list3;
            }
          })
      },
      getDay(date) {
        return date.getDate()
      },
      open2() {

        this.$notify({
          title: '提示',
          message: '请查看今日待办事项',
          duration: 0
        });
      },
      isWeek(date) {
        // 2.优化：三元表达式写法
        return date.getDay() === 6 || date.getDay() === 0
      }

    },

  }
</script>
<style>
  html,
  body {
    height: 100%;
    margin: 0px;
  }

  /* .el-calendar-day {
    height:  100;
   } */

  .sharp {
    height: 1rem;
    width: 1rem;
    background-color: blueviolet;
    transform: rotateZ(45deg);
    box-shadow: 2px 2px 3px rgba(114, 124, 245, .5);
    position: inherit;
    margin-left: 10.5rem;
    margin-top: -6px;
  }

  .date-content {
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
  }

  .date-content .rest {
    color: #fff;
    border-radius: 50%;
    background: rgb(250, 124, 77);
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;
  }

  .date-content .text {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
  }
</style>
